import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component({})
export default class appToggleButton extends Vue {
  /** 绑定的初始值 */
  @Prop({
    required: false,
    default: '',
  }) value!: string | number | boolean;
  /** 开启时文本 */
  @Prop({
    required: false,
    default: '是',
  }) onLabel!: string | number;
  /** 开启时图标 */
  @Prop({
    required: false,
    default: '',
  }) onIcon?: string;
  /** 开启时值 */
  @Prop({
    required: false,
    default: true,
  }) onValue!: string | number | boolean;
  /** 关闭时文本 */
  @Prop({
    required: false,
    default: '否',
  }) offLabel!: string | number;
  /** 关闭时图标 */
  @Prop({
    required: false,
    default: '',
  }) offIcon?: string;
  /** 关闭时值 */
  @Prop({
    required: false,
    default: false,
  }) offValue!: string | number | boolean;

  status: 'on' | 'off' = 'on';

  /** 是否使用antdv自带icon组件 */
  get useIcon() {
    const icon = (this.status === 'off' ? this.offIcon : this.onIcon)?.trim();
    const iconArray = icon?.split(" ") || [];
    return iconArray.length === 1;
  }

  @Watch("value")
  onValueChange() {
    if (this.value === this.offValue) {
      this.status = 'off';
    } else {
      this.status = 'on';
      if (this.value !== this.onValue) {
        this.$emit('input', this.onValue);
      }
    }
  }

  mounted() {
    this.onValueChange();
  }

  onClickButton() {
    if (this.status === 'on') {
      this.status = 'off';
      this.$emit('input', this.offValue);
    } else if (this.status === 'off') {
      this.status = 'on';
      this.$emit('input', this.onValue);
    }
  }
}
